 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@include file="../common/taglibs.jsp" %>

<%
	//获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）:    
	String basePath4MyAccountleft = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath();   
	
%>  
		
		
		<div class="panel panel-default">
			  <!-- Default panel contents -->
			  <div class="panel-heading">Account</div>
			  <div class="panel-body">
				    <div class="col-md-12">
				    	<div class="row">
				    	<div class="col-md-7">
				    	<c:choose>
				    		<c:when test="${!empty member.pic }">
				    			<img class="img-rounded" src="<%=basePath4MyAccountleft %>/assets/images/member/${member.pic}"/>
				    		</c:when>
				    		<c:otherwise>
				    			<img class="img-rounded" src="<%=basePath4MyAccountleft %>/assets/images/member/pic.jpg"/>
				    		</c:otherwise>
				    	</c:choose>
						</div>
						<!-- 
						<div class="col-md-5">
							integral:<c:choose><c:when test="${!empty member.integral }">${member.integral }</c:when><c:otherwise>0</c:otherwise></c:choose>
						</div>
						 -->
						</div>
					</div>
					<div class="col-md-12" align="left">
						<span onclick="editMemberPic()" class="glyphicon glyphicon-edit">.edit-profile-picture</span>
					</div>
			  </div>
		
			  <!-- List group -->
			  <ul class="list-group">
			    <li class="list-group-item"><a href="<%=basePath4MyAccountleft%>/member/toMyAccount"><span class="glyphicon glyphicon-user">Personal Details</span></a></li>
			    <li class="list-group-item"><a href="<%=basePath4MyAccountleft%>/order/toMyOrder">MyOrders</a></li>
			    <li class="list-group-item"><a href="<%=basePath4MyAccountleft %>/product/toMyCart"><span class="glyphicon glyphicon-shopping-cart">MyCart</span></a></li>
			    <c:if test="${!empty member }">
			    <li class="list-group-item"><a href="<%=basePath4MyAccountleft%>/member/changePassword"><span class="glyphicon glyphicon-edit">Change Password</span></a></li>
			    </c:if>
			  </ul>
		</div>

		 <div class="modal fade" id="editPicModal" tabindex="-1" role="dialog"  aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		        <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-circle-arrow-up">&nbsp;Choosing Your Photo</span></h4>
		      </div>
		      <div class="modal-body">
		       		<div class="row">
			      		<form id="editMemberPictureForm" action="<%=basePath4MyAccountleft %>/member/uploadMemberPicture" method="post" role="form" enctype="multipart/form-data" >
							 <div class="form-group col-md-11 col-md-offset-1">
							 	<span class="col-sm-10 control-label">Pick a unique photo from your life </span>
							 </div>
							 
							 
							 <div class="form-group col-md-11 col-md-offset-1">
							    <span class="col-sm-3 control-label">File Select:</span>
							    <input type="file" id="picFile" name="picFile">
							    <br>
							    <p><span class="glyphicon glyphicon-warning-sign">&nbsp;</span><b>Note</b>:<font color="orange"> image format supports only jpg、 png 、gif. </font></p>
						  </div>
						 
						</form>
				    </div>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-success btn-sm" onclick="javascript:submitEditMemberPictureForm();">Submit</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->

 <script type="text/javascript">  
	  function editMemberPic(){
		  $('#editPicModal').modal('show');
	  }
	  function submitEditMemberPictureForm(){
		  var picFile = $("#picFile").val();
		  if(picFile != ''){
			  var last = picFile.split(".")[1];
			  if(last != null && (last.toLowerCase() == 'jpg' || last.toLowerCase() == 'png' || last.toLowerCase()=='gif')){
				  $("#editMemberPictureForm").submit() ;
			  }else{
				  alert("image format error.");
				  return ;
			  }
			 
		  }
	  }
	  
   </script>
		 
		          
		          